Next js를 배워보자 #1
React나 angular, vue 같은 프레임워크(라이브러리)를 보면
서버에서 완성된 HTML, CSS, JS 파일을 내려주는 것이 아니라
간단한 뼈대만 내려주고, 클라이언트 측에서 Javascript를 사용하여 화면을 그리는
클라이언트 사이드 렌더링(Client-side Rendering) 방식을 주로 사용한다.
서버사이드 렌더링 vs 클라이언트 사이드 렌더링
- 서버사이드 렌더링 (SSR): 브라우저가 HTML 요청 시 서버에서 완성된 페이지를 내려줌
- 클라이언트 사이드 렌더링 (CSR): 브라우저가 최소한의 HTML을 받고, JS로 DOM을 생성
각 방식은 다음과 같은 특징이 있다:
| 구분 | 서버사이드 렌더링 | 클라이언트 사이드 렌더링 |
|---|---|---|
| SEO | 유리함 | 불리함 |
| 초기 로딩 속도 | 빠름 | 느릴 수 있음 |
| 사용자 경험 | 전통적 방식 | 인터랙티브함에 강점 |
| 서버 부하 | 증가 | 감소 |
왜 Next.js인가?
React를 사용할 때 서버사이드 렌더링이 필요하다면,
가장 자주 접하게 되는 도구 중 하나가 Next.js이다.
Next.js는 다음과 같은 특징을 가진다:
- React 기반 프레임워크
- 페이지 라우팅 내장
- SSR 및 SSG(Static Site Generation) 지원
- API Route 및 백엔드 기능도 간단히 작성 가능
- 기본 설정이 우수하고 빠르게 개발 가능
공식 홈페이지: https://nextjs.org/
다음 글에서는 실제 예제를 통해 Next.js를 설치하고 실행해보자.